<template>
  <view class="expansion-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="back-btn" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <view class="page-title">信息化拓展</view>
      <view class="right-placeholder"></view>
    </view>

    <!-- 集团信息展示 -->
    <view class="group-info-card">
      <view class="card-title">
        <u-icon name="home" size="20" color="#007aff"></u-icon>
        <text>{{ groupInfo.name }}</text>
      </view>
    </view>

    <!-- 分类Tab -->
    <view class="tab-container">
      <u-tabs :list="categoryTabs" :current="currentTab" @change="tabChange"></u-tabs>
    </view>

    <!-- 产品列表 -->
    <view class="product-list" v-if="filteredProducts.length > 0">
      <view class="product-card" v-for="(item, index) in filteredProducts" :key="index">
        <view class="product-header">
          <view class="product-title">{{ item.productName }}</view>
          <view
            class="product-status"
            :class="getStatusClass(item.status)"
          >{{ getStatusText(item.status) }}</view>
        </view>

        <view class="product-content">
          <view class="product-item">
            <text class="item-label">拟拓展产品数量：</text>
            <text class="item-value">{{ item.quantity }}</text>
          </view>
          <view class="product-item">
            <text class="item-label">预计可签约金额：</text>
            <text class="item-value">{{ item.expectedAmount }} 元/年</text>
          </view>
          <view class="product-item">
            <text class="item-label">预计落地时间：</text>
            <text class="item-value">{{ item.expectedTime }}</text>
          </view>
          <view class="product-item">
            <text class="item-label">投放政策及资费：</text>
            <text class="item-value">{{ item.policy }}</text>
          </view>
          <view class="product-item">
            <text class="item-label">是否为项目或服务包：</text>
            <text class="item-value">{{ item.isProject ? '是' : '否' }}</text>
          </view>
          <view class="product-item" v-if="item.category === 'line'">
            <text class="item-label">异网专线资费：</text>
            <text class="item-value">{{ item.otherNetworkFee || '无' }}</text>
          </view>
          <view class="product-item" v-if="item.category === 'line'">
            <text class="item-label">异网专线到期时间：</text>
            <text class="item-value">{{ item.otherNetworkExpireTime || '无' }}</text>
          </view>
        </view>

        <view class="product-footer">
          <view class="product-manager" v-if="item.manager">产品主管：{{ item.manager }}</view>
          <view class="product-actions">
            <u-button type="primary" size="mini" @click="showFollowRecords(item)">跟进记录</u-button>
            <u-button type="primary" size="mini" plain @click="editProduct(index)">编辑</u-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <u-empty mode="data" text="暂无信息化拓展记录"></u-empty>
    </view>

    <!-- 添加按钮 -->
    <view class="add-btn" @click="showCategoryPopup">
      <u-icon name="plus" color="#fff" size="24"></u-icon>
    </view>

    <!-- 选择产品类别弹窗 -->
    <u-popup v-model="showCategorySelect" mode="bottom">
      <view class="category-popup">
        <view class="popup-title">选择产品类别</view>
        <view class="category-list">
          <view
            class="category-item"
            v-for="(item, index) in categoryOptions"
            :key="index"
            @click="selectCategory(item)"
          >
            <text>{{ item.label }}</text>
            <u-icon name="arrow-right" size="20" color="#999"></u-icon>
          </view>
        </view>
        <view class="popup-cancel" @click="showCategorySelect = false">取消</view>
      </view>
    </u-popup>

    <!-- 产品跟进记录弹窗 -->
    <u-popup v-model="showFollowPopup" mode="center" border-radius="10" width="90%">
      <view class="follow-popup">
        <view class="popup-title">跟进记录</view>
        <view
          class="follow-records"
          v-if="selectedProduct && selectedProduct.followRecords && selectedProduct.followRecords.length > 0"
        >
          <view
            class="follow-record-item"
            v-for="(record, index) in selectedProduct.followRecords"
            :key="index"
          >
            <view class="record-time">{{ record.createTime }}</view>
            <view class="record-content">{{ record.content }}</view>
          </view>
        </view>
        <view class="empty-records" v-else>
          <text>暂无跟进记录</text>
        </view>

        <view class="add-record">
          <u-input v-model="newFollowContent" type="textarea" placeholder="请输入跟进内容" height="100"></u-input>
          <u-button type="primary" @click="addFollowRecord">添加跟进</u-button>
        </view>

        <view class="popup-close" @click="showFollowPopup = false">关闭</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      groupId: "",
      groupInfo: {
        name: "加载中..."
      },
      categoryTabs: [
        { name: "全部" },
        { name: "专线" },
        { name: "移动云" },
        { name: "物联网" },
        { name: "短彩信" },
        { name: "其他" }
      ],
      currentTab: 0,
      productList: [],
      showCategorySelect: false,
      showFollowPopup: false,
      selectedProduct: null,
      newFollowContent: "",
      // 产品类别选项
      categoryOptions: [
        {
          value: "line",
          label: "专线产品",
          subProducts: [
            "互联网专线",
            "数据专线",
            "商务快线AB",
            "商务快线C",
            "VPN专线",
            "政务外网",
            "专线卫士",
            "FTTR-B",
            "E企组网（路由器）",
            "企业宽带",
            "其它"
          ]
        },
        {
          value: "cloud",
          label: "移动云产品",
          subProducts: ["云电脑", "云主机类", "saas类"]
        },
        {
          value: "iot",
          label: "物联网产品",
          subProducts: ["物联网卡", "千里眼", "和对讲", "5G CPE", "烟感"]
        },
        { value: "sms", label: "短彩信产品", subProducts: ["云MAS"] },
        {
          value: "other",
          label: "其他产品",
          subProducts: ["IDC", "和教育", "其他"]
        }
      ]
    };
  },
  computed: {
    filteredProducts() {
      if (this.currentTab === 0) {
        return this.productList;
      }

      const categoryMap = {
        1: "line",
        2: "cloud",
        3: "iot",
        4: "sms",
        5: "other"
      };

      return this.productList.filter(
        item => item.category === categoryMap[this.currentTab]
      );
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },

    tabChange(index) {
      this.currentTab = index;
    },

    // 获取集团信息
    getGroupInfo() {
      // 模拟数据，实际应从接口获取
      const groupDetails = {
        "1": {
          name: "平凉市政府",
          district: "崆峒区",
          industry: "政府机构",
          manager: "张三"
        },
        "2": {
          name: "平凉市教育局",
          district: "崆峒区",
          industry: "教育",
          manager: "李四"
        },
        "3": {
          name: "平凉市人民医院",
          district: "崆峒区",
          industry: "医疗",
          manager: "王五"
        }
      };
      this.groupInfo = groupDetails[this.groupId] || { name: "未知集团" };
    },

    // 获取信息化拓展数据
    getProductList() {
      // 模拟数据，实际应从接口获取
      setTimeout(() => {
        this.productList = [
          {
            id: 1,
            category: "line",
            productName: "互联网专线",
            quantity: 2,
            expectedAmount: 50000,
            expectedTime: "2023-09-30",
            policy: "提供100M带宽，每年50000元",
            isProject: true,
            isLanded: false,
            status: "processing",
            manager: "李晶晶",
            otherNetworkFee: "60000元/年",
            otherNetworkExpireTime: "2023-12-31",
            followRecords: [
              {
                id: 1,
                createTime: "2023-07-10",
                content:
                  "8月7日，拜访客户单位平凉市政府，沟通了互联网专线的报价及设计方案，客户意向8月份建设，对我公司该项产品的意见为满意。"
              }
            ]
          },
          {
            id: 2,
            category: "cloud",
            productName: "云电脑",
            quantity: 20,
            expectedAmount: 24000,
            expectedTime: "2023-10-15",
            policy: "每台100元/月，按年收费",
            isProject: false,
            isLanded: false,
            status: "processing",
            manager: "乔花",
            followRecords: []
          },
          {
            id: 3,
            category: "iot",
            productName: "物联网卡",
            quantity: 50,
            expectedAmount: 6000,
            expectedTime: "2023-08-20",
            policy: "每张10元/月，一年起订",
            isProject: false,
            isLanded: true,
            status: "landed",
            manager: "石慧贤",
            followRecords: [
              {
                id: 2,
                createTime: "2023-08-15",
                content: "客户确认订购50张物联网卡，已完成合同签订。"
              }
            ]
          }
        ];
      }, 500);
    },

    // 显示产品类别选择
    showCategoryPopup() {
      this.showCategorySelect = true;
    },

    // 选择产品类别
    selectCategory(category) {
      // 这里应该跳转到产品添加页面，传递产品类别信息
      // 简化处理，这里直接关闭弹窗
      this.showCategorySelect = false;
      uni.showToast({
        title: "选择了" + category.label,
        icon: "none"
      });
    },

    // 编辑产品
    editProduct(index) {
      const product = this.filteredProducts[index];
      // 应该跳转到产品编辑页面
      uni.showToast({
        title: "编辑产品: " + product.productName,
        icon: "none"
      });
    },

    // 显示跟进记录
    showFollowRecords(product) {
      this.selectedProduct = product;
      this.newFollowContent = "";
      this.showFollowPopup = true;
    },

    // 添加跟进记录
    addFollowRecord() {
      if (!this.newFollowContent.trim()) {
        uni.showToast({
          title: "请输入跟进内容",
          icon: "none"
        });
        return;
      }

      // 创建新记录
      const now = new Date();
      const createTime =
        now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();

      // 如果没有跟进记录数组，创建一个
      if (!this.selectedProduct.followRecords) {
        this.selectedProduct.followRecords = [];
      }

      // 添加记录
      this.selectedProduct.followRecords.unshift({
        id: Date.now(),
        createTime: createTime,
        content: this.newFollowContent
      });

      uni.showToast({
        title: "添加成功",
        icon: "success"
      });

      this.newFollowContent = "";
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        processing: "跟进中",
        abandoned: "废弃",
        landed: "已落地"
      };
      return statusMap[status] || "未知状态";
    },

    // 获取状态样式类
    getStatusClass(status) {
      return `status-${status}`;
    }
  },
  onLoad(options) {
    this.groupId = options.groupId || "";

    if (!this.groupId) {
      uni.showToast({
        title: "缺少集团单位ID",
        icon: "none"
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
      return;
    }

    this.getGroupInfo();
    this.getProductList();
  }
};
</script>

<style>
.expansion-container {
  padding: 15px;
  background-color: #f5f7fa;
  min-height: 100vh;
  position: relative;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.right-placeholder {
  width: 40px;
}

.group-info-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.card-title text {
  margin-left: 8px;
}

.tab-container {
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.product-list {
  margin-bottom: 80px;
}

.product-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.product-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.product-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.status-processing {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-abandoned {
  background-color: #fff2e8;
  color: #ff7a45;
}

.status-landed {
  background-color: #f6ffed;
  color: #52c41a;
}

.product-content {
  padding: 5px 0;
}

.product-item {
  margin-bottom: 8px;
}

.item-label {
  color: #666;
  font-size: 14px;
}

.item-value {
  color: #333;
  font-size: 14px;
  word-break: break-all;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #eee;
  margin-top: 10px;
}

.product-manager {
  font-size: 12px;
  color: #999;
}

.product-actions {
  display: flex;
}

.product-actions u-button {
  margin-left: 10px;
}

.empty-state {
  margin-top: 50px;
}

.add-btn {
  position: fixed;
  right: 20px;
  bottom: 30px;
  width: 56px;
  height: 56px;
  background-color: #007aff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 122, 255, 0.3);
  z-index: 99;
}

.category-popup {
  padding: 15px;
}

.popup-title {
  font-size: 16px;
  text-align: center;
  margin-bottom: 15px;
  color: #333;
  font-weight: bold;
}

.category-list {
  margin-bottom: 15px;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.category-item:last-child {
  border-bottom: none;
}

.popup-cancel {
  text-align: center;
  color: #999;
  padding: 15px 0;
  border-top: 1px solid #eee;
}

.follow-popup {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

.follow-records {
  margin: 15px 0;
  max-height: 200px;
  overflow-y: auto;
}

.follow-record-item {
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 5px;
  margin-bottom: 10px;
}

.record-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.record-content {
  font-size: 14px;
  color: #333;
  word-break: break-all;
}

.empty-records {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  color: #999;
}

.add-record {
  margin: 15px 0;
}

.add-record u-button {
  margin-top: 10px;
}

.popup-close {
  text-align: center;
  color: #007aff;
  margin-top: 15px;
}
</style> 